<!DOCTYPE html>
<html>
<head>
    <title>金银猫CSmall金银珠宝首饰在线交易平台--金银猫CSmall</title>
    <meta name="keywords" content="{$metaKeywords}"/>
    <meta name="description" content="{$metaDesc}"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico">
    <link type="text/css" rel="stylesheet" href="../css/common.css">
    <link type="text/css" rel="stylesheet" href="../css/index.css">
    <link type="text/css" rel="stylesheet" href="../css/eui.css">

    <style>
        .index_product_list_box {
            width: 1190px;
            background-color: white;
            margin: 0 auto;
            border-radius: 18px;
        }

        .index_product_list {
            padding-top: 20px;
        }

        .index_product_detail {
            width: 215px;
            height: 320px;
            margin: 0 0 30px 18px;
            border: 1px solid red;
            float: left
        }

        .el-button.is-round {
            margin: 150px 180px 10px 50px;
        }

        #nav {
            background-color: #820c0c;
        }

        #nav li .nava {
            color: white;
        }

    </style>
</head>
<body>
<!--头部部分 开始-->

<!--登录状态栏 开始-->
<div class="topbar">
    <div class="wrap iconlist">
        <div class="memberbox width-6">嗨！欢迎来到金猫银猫 <a href="#">请登录</a> <a href="#">免费注册</a></div>
        <div class="width-6">
            <a href="#"><i class="icon_heart icon_topbar"></i>我关注的品牌</a>
            <a href="#">金猫银猫会员</a>
            <a href="#"><i class="icon_shopcart icon_topbar"></i>购物车<span id="shopcart_count">0</span>件</a>
            <span class="fav">收藏夹<i class="icon icon_dropdown"></i></span> |
            <span><i class="icon_phone icon_topbar"></i>手机版</span>
            <span class="fav">商家支持<i class="icon icon_dropdown"></i></span>
            <span class="fav"><i class="icon_shopcart icon_topbar"></i>网站导航<i class="icon icon_dropdown"></i></span>
        </div>
    </div>
</div>
<!--登录状态栏 结束-->
<div id="header">

</div>
<div style="clear:both"></div>
<div>
    <div id="nav">
        <div class=" wrap">
            <div class="logobar width-3">
                <p style="color: white;margin: 12px 0px 0px 100px;font-size: 30px">金猫银猫</p>
            </div>
            <!--搜索栏 开始-->
            <div id="searchbar" class="width-3" style="margin:15px 0px 15px 500px;">
                <form method="get" action="/searchResult.html">
                    <input type="text" name="keywords" class="txt" value="" placeholder="站内搜索"/>
                    <input style="background-color: #8c939d" type="submit" class="bt" value="搜索"/>
                    <div class="clear"></div>
                </form>
            </div>
            <!--搜索栏 结束-->

        </div>
        <div class="clear"></div>
    </div>
</div>

<div id="mainer">
    <el-container>
        <el-header></el-header>
        <el-main style="width: 1200px;margin: -50px auto 0 auto">
            <el-row :gutter="10">
                <el-col :span="4">

                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">


                        <el-menu-item index="1">
                            <span slot="title">个人信息</span>
                        </el-menu-item>

                        <el-menu-item index="2">
                            <span slot="title">修改密码</span>
                        </el-menu-item>

                        <el-menu-item index="3">
                            <span slot="title">收货地址</span>
                        </el-menu-item>

                        <el-menu-item index="4">
                            <span slot="title">我的收藏</span>
                        </el-menu-item>

                        <el-menu-item index="4">
                            <span slot="title">我的订单</span>
                        </el-menu-item>

                        <el-menu-item index="4">
                            <span slot="title">我的购物车</span>
                        </el-menu-item>

                    </el-menu>
                </el-col>
                </el-col>
                <el-col :span="20">
                    <div style="color: red">新增收货地址</div>
                    <br>
                    <span style="color: red">*</span>地址信息:&nbsp &nbsp
                    <el-cascader :options="options">
                        <template slot-scope="{ node, data }">
                            <span>{{ data.label }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>

                    <div>
                        <br><br>
                        <span style="color: red;line-height: 60px ">*</span>详细地址:
                        &nbsp &nbsp
                        <el-input
                                type="textarea"
                                placeholder="请输入详细地址信息"
                                v-model="textarea"
                                maxlength="30"
                                show-word-limit
                                style="width: 500px"
                        >
                        </el-input>
                    </div>
                    <br><br>
                    <span>邮政编码:</span> &nbsp &nbsp&nbsp
                    <el-input v-model="input" placeholder="请输入邮政编码" style="width: 300px"></el-input>
                    <br>
                    <span style="color: red;line-height: 60px ">*</span>收货人姓名:
                    <el-input v-model="input" placeholder="长度不超过25个字符" style="width: 300px"></el-input>
                    <br>
                    <span style="color: red;line-height: 60px ">*</span>手机号码:&nbsp &nbsp
                    <el-input v-model="input" placeholder="电话号码、手机号码必须填一项" style="width: 300px"></el-input>
                    <br>
                    &nbsp &nbsp &nbsp &nbsp&nbsp &nbsp&nbsp &nbsp&nbsp &nbsp
                    <el-button size="mini" type="primary " style="margin: 0 auto">保存</el-button>
                    <br><br>
                    <el-table
                            :data="tableData"
                            style="width: 100%;" >
                        <el-table-column
                                label="收货人"
                                width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="收货地址"
                                width="300">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.address }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="邮编"
                                width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.postCode }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="电话/手机号"
                                width="250">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-col>

            </el-row>

        </el-main>
        <el-footer></el-footer>
    </el-container>

</div>

</div>


<!-- 底部内容 开始 -->
<div id="footer">
    <div class="wrap">
        <div class="line"></div>
        <div class="help">
            <dl class="width-2">
                <dt>购物指南</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>购物保障</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>售后服务</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-2">
                <dt>关于我们</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>
            <dl class="width-4">
                <dt>手机上金猫银猫</dt>
                <dd><a href="{$prefix}article/?id={$v.id}">购买流程</a></dd>
                <dd><a href="{$prefix}article/?id={$v.id}">支付方式</a></dd>
            </dl>


            <div style="clear:both"></div>
        </div>
        <!-- help -->
    </div>

    <div class="copyright">
        <p class="copy wrap">
            <a href="#">关于金猫银猫</a>
            <a href="#">帮助中心</a>
            <a href="#">诚聘英才</a>
            <a href="#">联系我们</a>
            <a href="#">网站合作</a>
            <a href="#">法律声明</a>
            <a href="#">廉政举报</a><br>
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> |
            <a href="#">京东商城</a> |
            <a href="#">中国白银网</a> |
            <a href="#">央视网</a> |
            <a href="#">1号店</a> <br>

            <a href="http://www.csmall.com/help.do?page=help_help_icp" target="_blank">中国增值电信业务经营许可证 B2-20140169号</a>
            <span style="line-height:1.5;"> | ©2014深圳银瑞吉文化发展有限公司 All Rights Reserved | 国家信息产业部粤ICP备14018586号</span>
            <span class="powerby">技术支持：<a href="http://www.jentian.com/" target="_blank" title="广东井田云科技有限公司">井田云</a>
                        <br>
                        <a href="http://si.trustutn.org/info?sn=131141223010513021410" target="_blank"><img
                                src="http://v.trustutn.org/images/cert/bottom_small_img.png" alt="实名认证"
                                title="实名认证"></a>
                    </span>
        </p>
    </div>
    <div class="clear"></div>
</div>
<!-- 底部内容 结束 -->
</body>


<script src="js/vue.min.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script src="js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#mainer",
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
        data() {
            return {
                tableData: [{
                    name: '老王',
                    address: '隔壁 1130 弄',
                    postCode:'530000',
                    phoneNum:'15000000000'
                }, {
                    name: '老李',
                    address: '广西南宁市西乡塘区小鸡村666弄',
                    postCode:'530000',
                    phoneNum:'15000000000'
                }, {
                    name: '张三',
                    address: '广西南宁市大鸡村 888 弄',
                    postCode:'530000',
                    phoneNum:'15000000000'
                }],
                categoryArr: ["/pic/banner_06.jpg", "/pic/banner08.jpg"],
                productArr: ["/imgs/a.jpg", "/imgs/d.jpg", "/imgs/c.jpg", "/imgs/b.jpg"],
                options: [{
                    value: 'zhinan',
                    label: '北京',
                    children: [{
                        value: 'shejiyuanze',
                        label: '北京市',
                        children: [{
                            value: 'yizhi',
                            label: '西城区'
                        }, {
                            value: 'fankui',
                            label: '反馈'
                        }, {
                            value: 'xiaolv',
                            label: '效率'
                        }, {
                            value: 'kekong',
                            label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                            value: 'cexiangdaohang',
                            label: '侧向导航'
                        }, {
                            value: 'dingbudaohang',
                            label: '顶部导航'
                        }]
                    }]
                }, {
                    value: 'zujian',
                    label: '广东',
                    children: [{
                        value: 'basic',
                        label: '深圳',
                        children: [{
                            value: 'layout',
                            label: '宝安区'
                        }, {
                            value: 'color',
                            label: 'Color 色彩'
                        }, {
                            value: 'typography',
                            label: 'Typography 字体'
                        }, {
                            value: 'icon',
                            label: 'Icon 图标'
                        }, {
                            value: 'button',
                            label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                            value: 'radio',
                            label: 'Radio 单选框'
                        }, {
                            value: 'checkbox',
                            label: 'Checkbox 多选框'
                        }, {
                            value: 'input',
                            label: 'Input 输入框'
                        }, {
                            value: 'input-number',
                            label: 'InputNumber 计数器'
                        }, {
                            value: 'select',
                            label: 'Select 选择器'
                        }, {
                            value: 'cascader',
                            label: 'Cascader 级联选择器'
                        }, {
                            value: 'switch',
                            label: 'Switch 开关'
                        }, {
                            value: 'slider',
                            label: 'Slider 滑块'
                        }, {
                            value: 'time-picker',
                            label: 'TimePicker 时间选择器'
                        }, {
                            value: 'date-picker',
                            label: 'DatePicker 日期选择器'
                        }, {
                            value: 'datetime-picker',
                            label: 'DateTimePicker 日期时间选择器'
                        }, {
                            value: 'upload',
                            label: 'Upload 上传'
                        }, {
                            value: 'rate',
                            label: 'Rate 评分'
                        }, {
                            value: 'form',
                            label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                            value: 'table',
                            label: 'Table 表格'
                        }, {
                            value: 'tag',
                            label: 'Tag 标签'
                        }, {
                            value: 'progress',
                            label: 'Progress 进度条'
                        }, {
                            value: 'tree',
                            label: 'Tree 树形控件'
                        }, {
                            value: 'pagination',
                            label: 'Pagination 分页'
                        }, {
                            value: 'badge',
                            label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                            value: 'alert',
                            label: 'Alert 警告'
                        }, {
                            value: 'loading',
                            label: 'Loading 加载'
                        }, {
                            value: 'message',
                            label: 'Message 消息提示'
                        }, {
                            value: 'message-box',
                            label: 'MessageBox 弹框'
                        }, {
                            value: 'notification',
                            label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                            value: 'menu',
                            label: 'NavMenu 导航菜单'
                        }, {
                            value: 'tabs',
                            label: 'Tabs 标签页'
                        }, {
                            value: 'breadcrumb',
                            label: 'Breadcrumb 面包屑'
                        }, {
                            value: 'dropdown',
                            label: 'Dropdown 下拉菜单'
                        }, {
                            value: 'steps',
                            label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                            value: 'dialog',
                            label: 'Dialog 对话框'
                        }, {
                            value: 'tooltip',
                            label: 'Tooltip 文字提示'
                        }, {
                            value: 'popover',
                            label: 'Popover 弹出框'
                        }, {
                            value: 'card',
                            label: 'Card 卡片'
                        }, {
                            value: 'carousel',
                            label: 'Carousel 走马灯'
                        }, {
                            value: 'collapse',
                            label: 'Collapse 折叠面板'
                        }]
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }],
                text: '',
                textarea: '',
                input: ''
            }
        }


    })


</script>

</html>